<!DOCTYPE html>
<html>
<?php 
$cdnUrl='./';
?><head>
<meta charset="UTF-8">
<title>视界</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<?php echo $cdnUrl; ?>css/swiper.min.css">
<style>
html,body{width:100%;font-size:12px;font-family:Helvetica,Tahoma, Arial, STXihei,Microsoft YaHei, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
body{background:#ffffff;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;overflow-y: scroll;}
body, div{padding:0px;margin:0px auto;max-width:750px;}
-webkit-touch-callout:none;
-webkit-user-select:none;
html{-ms-touch-action:none;}
div,img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
*{-webkit-text-size-adjust: none;}
.simg{position:absolute;display:block;}
a{text-decoration:none;}
.txt{position:absolute;text-indent:4px;color:#787c7f;font-size:12px;z-index:2;border:none;background:transparent;}
.txt::-webkit-input-placeholder{text-align:left;color:#a2a2a2;}
select{position:absolute;color:#787c7f;display:block;background:transparent;border:0px;text-indent:4px;font-size:12px;-webkit-appearance:none;}
.container{position:relative;width:100%;height:auto;overflow:hidden;}
.page{position:absolute;width:100%;height:100%;display:none;}
.p1{position:absolute;width:100%;height:100%;opacity:0;}
.thebg{position:absolute;width:100%;top:0;left:0;}
.hide{display:none;}
.animated{animation-duration: 1s;animation-fill-mode: both;}
.animated.infinite{animation-iteration-count: infinite;}
.animated.delay-1s {animation-delay: 1s;}
.s1{background:#e3d8d2;}
.s28{background:#e0e0e0;}
.sl-t{position:absolute;width:100%;top:0;left:0;}
.logo, .p18-t1, .p24-t1{position:absolute;top:0;left:0;z-index:2;}
</style></head><body>
<div class="container">
  <div class="swiper-container">
    <div class="swiper-wrapper">
    
      <div class="swiper-slide s1">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p1.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p2.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p3.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p4.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p5.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p6.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p7.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p8.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p9.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p10.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p11.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p12.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p13.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p14.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p15.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p16.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p17.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="p18-t1" src="./img/p18-t1.png" />
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p18.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p19.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p20.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p21.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p22.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p23.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="p24-t1" src="./img/p24-t1.png" />
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p24.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p25.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p26.jpg" />
         </div>
      </div>
      <div class="swiper-slide">
         <img class="logo" src="./img/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="./img/p27.jpg" />
         </div>
      </div>
      <div class="swiper-slide s28">
         <div class="thebg">
             <img class="sl-t" src="./img/p28.jpg" />
         </div>
      </div>
      
  
       
    </div>
  </div>
</div>
<div style="display:none;">
  <audio id="music" loop="loop"><source src="http://lin.mei94.com/dian/1.mp3"  type="audio/mpeg"></audio>
</div>
<script src="http://mat1.gtimg.com/libs/jquery2/2.1.4/jquery2.min.js"></script>
<script src="<?php echo $cdnUrl ?>js/pxloader-images.min.js"></script>
<script src="<?php echo $cdnUrl ?>js/modernizr.2.5.3.min.js"></script>
<script src="<?php echo $cdnUrl ?>js/swiper.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
_h=h= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var sWidth = parseInt((window.innerWidth > 0) ? window.innerWidth : screen.width);
if(sWidth>750){sWidth=750;}
var _rate=(sWidth/750);
if(h<_rate*1334){h=_rate*1334;}
var _img=['p1.jpg'];
var loader = new PxLoader();
for(var i=0; i<_img.length; i++){loader.addImage('./img/'+_img[i]);}
var _music=document.getElementById("music");
loader.start();
loader.addCompletionListener(function(e){
	   $(".p1").addClass("fade-in").css({"opacity":1});
	   _music.play(); 
	   document.addEventListener("WeixinJSBridgeReady", function () { _music.play(); }, false);
});

$(function(){
	$('body').on('touchmove',function(e){
		//e.preventDefault();
	});
	$('.sl-t').width(sWidth).height(_rate*1334);
	$('.swiper-container').width(sWidth).height(h);
	$('.s1-en').width(_rate*181).height(_rate*65).css({"top":0, "right":0});
	
	$('.logo').width(_rate*336).height(_rate*122)
	$('.p18-t1').width(_rate*586).height(_rate*392);
	$('.p24-t1').width(_rate*590).height(_rate*307);
 
	

	 var swiper = new Swiper('.swiper-container',{initialSlide :0});

	 if(h > _rate*1334){
        var _cha= h - _rate*1334;
        $('.thebg').css({"top":_cha/2});
        $('.logo').css({"top":_cha/10});
     }


});
</script>
</body></html>